<template>
  <el-dialog
    title="编辑"
    :visible.sync="visible"
    :close-on-click-modal="false"
    class="rec-dialog"
    width="90%"
  >
    <el-row :gutter="40">
      <el-col
        :span="12"
        style="border-right:1px dashed #0a0a0a"
      >
        <el-form
          class="small-space"
          :model="operationInfo"
          label-position="left"
          label-width="90px"
          ref="operationInfo"
        >

          <el-form-item label="发布时间">
            {{operationInfo.publish_time | parseTime('{y}-{m}-{d} {h}:{i}:{s}')}}
          </el-form-item>

          <el-form-item
            label="话题"
            prop="topicId"
          >
            <el-select
              disabled
              v-model="operationInfo.topic_id"
            >
              <el-option
                v-for="item in topicOptions"
                :key="item.id"
                :label="item.text"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="内部ID">
            <el-input
              v-model="operationInfo.user_id"
              style="width:300px"
              disabled
            ></el-input>
          </el-form-item>

          <el-form-item
            label="正文"
            prop="content"
          >
            <el-input
              disabled
              type="textarea"
              :autosize="{ minRows: 2}"
              placeholder="请输入内容"
              v-model="operationInfo.content"
            >
            </el-input>
          </el-form-item>

          <el-form-item
            label="图片"
            prop="pictures"
          >
             <img v-for="img in operationInfo.images" :key="img" :src="img" width="30%"/>
            <el-dialog
              :visible.sync="dialogVisible"
              append-to-body
            >
              <img
                width="100%"
                :src="dialogImageUrl"
                alt=""
              >
            </el-dialog>
          </el-form-item>

          <el-form-item
            label="评论"
            prop="topic"
          >
            <el-input
              type="number"
              v-model.number="operationInfo.comment_num"
              style="width:200px;"
              disabled
            ></el-input>
          </el-form-item>

          <el-form-item
            label="点赞"
            prop="topic"
          >
            <el-input
              type="number"
              v-model.number="operationInfo.like_num"
              style="width:200px;"
              disabled
            ></el-input>
          </el-form-item>

        </el-form>
      </el-col>
      <el-col
        :span="12"
        style="height: 600px;overflow-y:scroll "
      >
        <el-tabs v-model="activeName">
          <el-tab-pane
            label="评论管理"
            name="first"
          >
            <div class="commentsList">
              <el-row :gutter="20">
                <template v-for="item in commentList">
                  <el-col :span="21">
                    <div class="comment-li bor">
                      <p><span>{{item.from_nickname}}({{item.from_uid}}) | {{item.from_user_sex=='0'?"女":"男"}}：</span>{{item.content}}</p>
                      <p>{{item.create_time | parseTime('{y}-{m}-{d} {h}:{i}:{s}')}}</p>
                    </div>
                  </el-col>
                  <el-col :span="3">
                    <div class="comment-li">
                      <el-button
                        size="small"
                        type="danger"
                        @click.stop="editComment(item.comment_id,'delete')"
                      >删除</el-button>
                    </div>
                  </el-col>
                </template>
              </el-row>
            </div>
            <el-form
              class="small-space"
              :model="commentForm"
              label-position="top"
              label-width="90px"
              ref="operationInfo"
            >
              <el-form-item
                label="选择机器人"
                label-width="120"
              >
                <el-select
                  v-model="commentForm.from_nickname"
                  placeholder="请选择机器人"
                  filterable
                  :remote-method="handleFilter"
                  remote
                  :loading="loading"
                >
                  <el-option
                    v-for="item in robotOptions"
                    :key="item.uid"
                    :label="item.nickname|robotName(item.sex)"
                    :value="item.uid"
                  >
                  </el-option>
                </el-select>
                <el-button @click="handleRandomChange">换一个</el-button>
              </el-form-item>
              <el-form-item
                label="添加评论内容"
                label-width="120"
              >
                <el-input
                  v-model="commentForm.content"
                  type="textarea"
                  placeholder="添加评论内容"
                ></el-input>
              </el-form-item>
              <el-form-item>
                <el-button
                  type="primary"
                  @click="editComment('','save')"
                >保存</el-button>
              </el-form-item>
            </el-form>
          </el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>
  </el-dialog>
</template>

<script>
export default {
  props: ["modalVisible", "formData", "current_id"],
  data() {
    return {
      visible: this.modalVisible,
      operationInfo: this.formData,
      topicOptions: [],
      dialogImageUrl: "",
      dialogVisible: false,
      activeName: "first",
      commentList: [],
      robotOptions: [],
      remoteFilter: true,
      loading: false,
      commentForm: {},
      trend_id: this.current_id
    };
  },
  computed: {
    uploadImg() {
      return this.baseUrl + "ContentDelivery/uploadImage";
    }
  },
  filters: {
    robotName(value, sex) {
      return value + "(" + (sex == "0" ? "女" : "男") + ")";
    }
  },
  watch: {
    modalVisible: function(value) {
      this.visible = value;
    },
    visible: function(val) {
      this.$emit("handleVisibleChange", val);
    },
    formData: function(value) {
      this.operationInfo = value;
    },
    current_id(val) {
      this.trend_id = val;
      this.getCommentList(val);
    }
  },
  mounted() {
    this.getTopicOption();
    this.getRobots();
  },
  methods: {
    getTopicOption() {
      this.$get("ContentDelivery/topicOptions", this.listQuery).then(resp => {
        this.topicOptions = resp.data.items;
      });
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    uploadSuccess(resp, file, fileList) {
      this.operationInfo.images.push({ url: resp.data.url });
    },
    handleRemove(file, fileList) {
      let imgUrl = file.url;
      for (let i = 0; i < this.operationInfo.images.length; i++) {
        if (this.operationInfo.images[i].url == imgUrl) {
          this.operationInfo.images.splice(i, 1);
        }
      }
      console.log(this.operationInfo.images);
    },
    getCommentList(trendId) {
      this.$get("trend/comment", { trend_id: trendId }).then(resp => {
        this.commentList = resp.data.comment_list;
      });
    },
    editComment(id, type) {
      if (type == "delete") {
        this.deleteComment(id);
      } else {
        this.addComment(this.commentForm);
      }
    },
    deleteComment(commentId) {
      let param = { comment_id: [commentId],admin_state:'2' };
      this.$put("trend/comment/admin", param).then(resp => {
        if (resp.status === 200) {
          this.getCommentList(this.operationInfo["trend_id"]);
          this.$message({
            message: "操作成功",
            type: "success"
          });
        } else {
          this.$message({
            message: resp.msg,
            type: "error"
          });
        }
      });
    },
    addComment(commentItem) {
      let param = {
        content: commentItem["content"],
        trend_id: this.operationInfo["trend_id"],
        from_uid: commentItem["from_nickname"]
      };
      this.$post("trend/comment", param)
        .then(resp => {
          if (resp.status === 200) {
            this.getCommentList(this.operationInfo["trend_id"]);
            this.$message({
              message: "操作成功",
              type: "success"
            });
            this.$emit("handleSuccess");
          } else {
            this.$message({
              message: resp.msg,
              type: "error"
            });
          }
        })
        .catch(err => {
          this.$message({
            message: err.data.error.description,
            type: "error"
          });
        });
    },
    getRobots(sex) {
      this.$get("robot/list", { limit: 30, offset: 0, sex: sex }).then(res => {
        this.robotOptions = res.data.robot_list;
      });
    },
    handleFilter(query) {
      let sex = query == "女" ? 0 : 1;
      this.getRobots(sex);
    },
    handleRandomChange() {
      var random_sex = Math.floor(Math.random() * 2);
      this.$get("robot/random?sex=" + random_sex).then(res => {
        this.robotOptions = res.data.robot_list;
        this.commentForm.from_nickname = res.data.robot_list[0]["uid"];
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.commentsList {
  margin-bottom: 20px;
  max-height: 300px;
  overflow-y: auto;
  overflow-x: hidden;
}
</style>

